<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
  <script src="./data.js"></script>
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" checked="false" id="inputone" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    // 获取ul
    let ul = document.querySelector('#list');
    // 动态渲染页面
    let render = data => {
      // 清除静态页面
      ul.innerHTML = '';
      // 重新渲染页面
      data.forEach((item, index) => {
        let li = document.createElement('li')
        li.innerHTML = `
        <input type="checkbox" ${item.checked ? 'checked' : ''} id="inputone"/>
        <span>${item.title} </span>
        <a href="javascript:;" class="collect">${item.collect ? '取消收藏' : '收藏'}</a>
        <a href="javascript:;" class="remove">删除</a>
        `;
        ul.appendChild(li);
      });

      // 点击删除功能
      let remove = document.querySelectorAll('#list .remove'); // 获取DOM对象
      // console.log(remove);
      remove.forEach((item, idx) => {
        // console.log(item);
        item.onclick = () => {
          // console.log(idx);
          data.splice(idx, 1);
          render(data);
        }
      });

      // 收藏和取消收藏  收藏和取消收藏和input状态关联
      let collect = document.querySelectorAll('.collect');  // 获取收藏取消收藏按钮
      let inputone = document.querySelectorAll('#inputone'); // 获取内容的input状态
      // console.log(collect);
      // console.log(inputone);
      collect.forEach((item, idx) => {
        // console.log(item);
        item.onclick = () => {
          // console.log(idx);
          data[idx].collect = !data[idx].collect;  // 修改数据collect状态
          data[idx].collect ? data[idx].checked = true : data[idx].checked = false; // 修改数据checked状态
          render(data);
        }
      });
      // 内容区input状态 和 收藏和取消收藏关联
      inputone.forEach((item, idx) => {
        // console.log(item);
        item.onclick = () => {
          // console.log(idx);
          data[idx].checked = !data[idx].checked;  // 修改数据checked状态
          data[idx].checked ? data[idx].collect = true : data[idx].collect = false; // 修改数据collect状态
          let flag = data.every(item => item.checked === true); // 全true则true
          flag ? checkAll.checked = true : checkAll.checked = false; // 全选框状态和input状态挂钩
          render(data);
        }
      });
    }
    render(data);

    // 全选全不选
    let checkAll = document.querySelector('#checkAll'); // 获取DOM对象
    // console.log(checkAll);
    checkAll.addEventListener('click', () => {
      // console.log(checkAll.checked);  // 获取全选框状态
      // 修改数据                      // 对象解构赋值
      checkAll.checked ? data.forEach(({checked}) => checked ) : data.forEach(item => item.checked = false);
      render(data);
    })

    // 底部删除功能
    let remove = document.querySelector('#remove');
    // console.log(remove);
    remove.addEventListener('click', () => {
      let data2 = data.filter(item => item.checked === false); // 过滤不满足条件的内容 返回新数组
      data = data2; // 关联两个数组 达到 数据内容一样
      data.length === 0 ? checkAll.checked = false : ''; // 当数据删干净了 全选框状态改变
      render(data);
    })

    // 底部添加功能
    let add = document.querySelector('#add'); // 获取添加DOM对象
    let inputText = document.querySelector('#newInfo'); // 获取文本框DOM对象
    add.addEventListener('click', () => {
      // 判断文本框内容是否为空 trim() 方法会从一个字符串的两端删除空白字符
      inputText.value.trim() === '' ? alert('内容不能为空') : data.push(
        { id: data.length, title: `${inputText.value}`, checked: false, collect: false }
      ) ;
      render(data);
      inputText.value = ''; // 清空文本框
    })
  </script>
</body>

</html>